<template>
  <a-modal
  class="choose-bill-modal"
  :visible="visible"
  :title="title"
  :maskClosable="false"
  :destroyOnClose="true"
  :keyboard="false"
  :closable="false"
  :confirmLoading="confirmLoading"
  width="70%"
  @cancel="closeModal(false)"
  @ok="handleSubmit">
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :defaultParams="defaultParams"
      :headParams="headParams"
      :defaultSelectedRowKeys="chosenIds"
      :rowSelectionSelect="rowSelectionSelect"
      :rowSelectionChange="rowSelectionChange"
      :form="form">
      <!-- 搜索条件 -->
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="账单时间">
            <fast-range-picker
              style="width: 240px"
              v-decorator="['startDate-endDate']">
            </fast-range-picker>
          </a-form-item>
          <!-- <a-form-item label="交易类型">
            <a-select
              showSearch
              allowClear
              style="width: 150px"
              :options="dealTypeList"
              v-decorator="['dealType']"
              placeholder="请选择交易类型">
            </a-select>
          </a-form-item> -->
        </a-form>
      </template>
    </search-table>

    <template slot="footer">
      <a-button key="back" @click="closeModal(false)"> {{ handle == 'view' ? '返回' : '取消' }} </a-button>
      <a-button :loading="confirmLoading" v-if="handle != 'view'" key="submit" type="primary" @click="handleSubmit"> 提交 </a-button>
    </template>
  </a-modal>
</template>

<script>
import { findDictNameByValue,createOptionsByDict } from '@/utils/dict'
import deepCopy from '@/utils/deepCopy'

const formData={}

export default {
  name: 'chooseBillForm',
  props: {
    handle: { // 操作类型
      type: String,
      default: 'edit'
    },
    record: { // 选中行数据
      type: Object,
      default () {
        return {}
      }
    },
    visible: { // 是否显示弹窗
      type: Boolean,
        default: false
    },
  },
  data() {
    return {
      confirmLoading: false, // 提交等待
      formData,
      disabled: false, // 表单禁用状态
      rules:{ // 表单验证规则
      },
      url: '/order/fashionablelog/page', // 列表接口地址
      headParams: {}, // 请求头参数
      defaultParams: { // 默认携带参数
      },
      dealTypeList: createOptionsByDict('DEAL_TYPE'), // 交易类型集合
      form: this.$form.createForm(this, { name: "table_search" }), // 搜索表单 
      columns: [
        {
          title: "时间",
          dataIndex: "createDate",
          key: "createDate",
        },
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          customRender: (text, record) =>  '收入'// findDictNameByValue('DEAL_TYPE', text)
        },
        {
          title: "交易名称",
          dataIndex: "dealname",
          key: "dealname",
          customRender: (text, record) =>  '订单收入'
        },
        {
          title: "商品名称",
          dataIndex: "goodsName",
          key: "goodsName",
        },
        {
          title: "订单号",
          dataIndex: "orderGoodsId",
          key: "orderGoodsId",
        },
        {
          title: "金额",
          dataIndex: "fashionablePrice",
          key: "fashionablePrice",
          customRender:(text,row)=>{
            return text ? '¥ '+(Number(text)/100).toFixed(2) : '¥ 0.00'
          }
        },
      ],
      allSelectedRows: [], // 不同分页下被选中的表格行
      chosenIds: [], // 不同分页下被选中的表格行id集合
    };
  },
  computed: {
    title() { // 弹窗标题
      let res = ''
      switch (this.handle) {
        case 'add':
          res = '添加'
          break;
        case 'edit':
          res = '编辑'
          break;
        case 'view':
          res = '查看'
          break;
        default:
          res = '操作'
          break;
        }
      return res
    }
  },
  watch: {
    // 监听弹窗显示，回显数据
    visible(value) {
      if (value && this.record.id) {
        this.$nextTick(()=> {
          this.formData = deepCopy(this.record)
        })
      } else {
        this.resetData()
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 重置
    resetData(){
      this.formData=deepCopy(formData);
    },
    // 表格单行选择
    rowSelectionSelect(record, selected) {
      if(!selected) {
        this.allSelectedRows.splice(this.allSelectedRows.findIndex(item => item.id == record.id), 1)
        this.chosenIds.splice(this.chosenIds.findIndex(item => item == record.id), 1)
      }
    },
    // 表格任意行发生选择或取消选择时回调
    rowSelectionChange(selectedRowKeys, selectedRows) {
      let _this = this
      if(selectedRows.length > 0) {
        selectedRows.forEach(item => {
          if(!_this.chosenIds.includes(item.id)) {
            _this.chosenIds.push(item.id)
            _this.allSelectedRows.push(item)
          }
        })
        selectedRowKeys = this.chosenIds
        this.$refs.searchtable.selectedRowKeys = this.chosenIds
      } else {
        this.$refs.searchtable.dataSource.forEach(dataItem => {
          if(_this.chosenIds.includes(dataItem.id)) {
            _this.allSelectedRows.splice(_this.allSelectedRows.findIndex(item => item.id == dataItem.id), 1)
            _this.chosenIds.splice(_this.chosenIds.findIndex(item => item == dataItem.id), 1)
          }
        })
      }
    },
    // 提交
    handleSubmit() {
      if (this.$refs.searchtable.selectedRowKeys.length == 0) {
        this.$message.warning('请先选择一项后再进行操作');
        return
      }
      let _this = this
      this.confirmLoading = true;
      _this.$post('/withdraw/auditor/add', {
        fashionableManType: _this.$refs.searchtable.dataSource[0].fashionableManType,
        fashionableManId: _this.$refs.searchtable.dataSource[0].fashionableManId,
        ids: _this.$refs.searchtable.selectedRowKeys
      })
      .then(res => {
        if (res && res.returnCode === 1000) {
          _this.confirmLoading = false;
          _this.$message.success('保存成功！')
          _this.closeModal(true)
        }
      })
      .catch(err => {
        _this.confirmLoading = false;
      })
    },
    // 取消
    closeModal(bool) {
      this.$emit('cancel', bool)
    }
  }
};
</script>

<style lang="less" scoped></style>
